<template>
  <div>
    <span>
      <span>请上传配置文件：</span>
      <span>
        <el-button
          size="mini"
          type="danger"
          style="float: right;margin:0 10px 0 0;"
          @click="handleDelt(id)"
        >重置</el-button>
        <el-button
          size="mini"
          type="success"
          style="float: right;margin:0 30px 0 0;"
          @click="handleClick(id)"
        >配置数据源</el-button>
        <el-button
          size="mini"
          type="primary"
          style="float: right;margin:0 30px 0 0;"
          @click="handleDownload()"
        >下载模板文件</el-button>
      </span>
    </span>
    <!-- 以下补充上传文件的地址 -->
    <el-upload
      ref="upload"
      style="margin:20px 0 20px 150px"
      class="upload-demo"
      drag
      action="127.0.0.1:8000/upload_file/excel"
      :before-upload="handleUpload"
      multiple
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">当前支持上传Excel/CSV文件，上传后点击右侧配置，请勿重复上传。</div>
    </el-upload>

    <el-table :data="tableData" height="300" border style="position:relative;width: 100%">
      <el-table-column prop="area" label="地区"></el-table-column>
      <el-table-column prop="area_manager" label="地区经理"></el-table-column>
      <el-table-column prop="sales_vol" label="销售额"></el-table-column>
      <el-table-column prop="profit" label="利润"></el-table-column>
      <el-table-column prop="profit_margin" label="利润率"></el-table-column>
      <el-table-column prop="cus_num" label="客户数"></el-table-column>
      <el-table-column prop="unit_price" label="客单价"></el-table-column>
      <el-table-column prop="per_order" label="人均单量"></el-table-column>
      <el-table-column prop="sales_num" label="销售量"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getDatalist, deleteById, uploadfile } from "@/api/datasource";

export default {
  data() {
    return {
      id: 5,
      tableData: []
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    // 通过a标签的链接向后端服务发get请求，接收后端的文件流,此处需补充文件地址
    handleDownload() {
      const a = document.createElement("a");
      a.href = "http://127.0.0.1:8001/static/经销商绩效分析表.xlsx";
      a.click();
    },
    // 文件上传
    handleUpload(file) {
      const filemap = { file_type: this.id, file: file };
      console.log(filemap);
      uploadfile(filemap).then(response => {
        const resp = response;
        console.log(resp);
        if (resp.flag) {
          this.$message({
            type: "success",
            message: "文件上传成功"
          });
          // this.getimageList()
        } else {
          this.$message({
            message: resp.message,
            type: "warning"
          });
        }
      });
    },
    handleClick(id) {
      getDatalist(this.id).then(response => {
        const resp = response;
        if (this.tableData) {
          if (resp.flag) {
            this.tableData = resp.data;
            this.$message({
              message: "数据源配置成功！",
              type: "success"
            });
          } else {
            this.$message.error("配置失败，请上传配置文件");
          }
        } else {
          this.$message.error("当前存在数据源，请先重置");
        }
      });
    },

    fetchList() {
      getDatalist(this.id).then(response => {
        this.tableData = response.data;
      });
    },

    handleDelt(id) {
      console.log("删除", id);

      this.$confirm("此操作将永久删除当前数据源信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$refs["upload"].clearFiles();
        deleteById(id).then(response => {
          const resp = response;
          this.fetchList();
        });
      });
    }
  }
};
</script>

<style scoped>
</style>
